<template>
  <header class="header">
    <el-row type="flex" justify="space-between" class="main">
      <!-- logo -->
      <div class="logo">
        <nuxt-link to="/">
          <img src="http://157.122.54.189:9093/images/logo.jpg" alt />
        </nuxt-link>
      </div>
      <!-- 菜单栏 -->
      <el-row type="flex" class="navs">
        <nuxt-link to="/">首页</nuxt-link>
        <nuxt-link to="/post">旅游攻略</nuxt-link>
        <nuxt-link to="/hotel">酒店</nuxt-link>
        <nuxt-link to="/air">国内机票</nuxt-link>
      </el-row>
      <!-- 登录/用户信息 -->
      <el-row>登录/用户</el-row>
    </el-row>
  </header>
</template>

<script>
export default {
  methods: {
    // 用户退出
    handleLogout(){},
  }
};
</script>

<style lang="less" scoped>
  .header{
    height: 60px;
    line-height: 60px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    box-shadow: 2px 2px 2px #f5f5f5;
    box-sizing: border-box;
  }
  .main {
    // 有点像原来的版心
    width: 1000px;
    margin: 0 auto;
  }
  .logo{
    width: 156px;
    padding-top: 8px;
    img{
      display: block;
      width: 100%;
    }
  }
  .navs{
    flex: 1;
    margin: 0 20px;
    a{
      display: block;
      padding: 0 20px;
      height: 60px;
      box-sizing: border-box;
      &:hover{
        border-bottom: 5px solid #409eff;
        color: #409eff
      }
    }
    /* /deep/ 深度作用选择器 */
    /deep/ .nuxt-link-exact-active{
      background-color: #409eff;
      color: #fff!important;
    }
  }
</style>